<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '购物车',
  },
}
</route>
<template>
  <view class="w-full pos-fixed" :style="{ height: contentH + 'px' }">
    <DragPane :min="200" :max="contentH * 0.6" :container-height="contentH">
      <template #content>
        <view class="flex center h-5 w-full my-10 bg-amber" v-for="item in 50" :key="item">
          {{ item }}
        </view>
      </template>
      <template #pane>
        <view class="flex center h-5 w-full my-10 bg-emerald" v-for="item in 50" :key="item">
          {{ item }}
        </view>
      </template>
      <template #top-header>
        <view class="flex center h-10 w-full bg-blueGray">我的top head</view>
      </template>
      <template #bottom-header>
        <view class="flex center h-10 w-full bg-blueGray">bottom head</view>
      </template>
    </DragPane>
  </view>
</template>

<script setup lang="ts">
import DragPane from '@/components/DragPane/DragPane.vue'
import { getPageContentHeight } from '@/utils/dimensions'

const contentH = ref(getPageContentHeight(50))
console.log('car 容器高度', contentH.value)
</script>

<style scoped lang="scss">
.content {
  height: 100px;
  background: palegoldenrod;
  border-radius: 15px;
}
</style>
